<template>
  <div id="app">

        <!-- 顶部区域 -->
        <top class="top"></top>
        <!-- 轮播图区域 -->
       <div id="rock_img"></div>
       <!-- 内容区域 -->
       <div id="content"></div>
       <!-- 底部相关信息区域 -->
       <div id="footer"></div>
       
             <router-view id="showTime"></router-view>
  
        <div id="floatdiv" > <a href="#" title="点击我可以回到最顶部喔！！！"> <i class="iconfont icon-houtai_paixujiantouxia"></i></a></div>

         <!-- 这里就已经底部信息部分了 -->
             <webFooter class="webfooter">
              
             </webFooter>

            
  </div>
</template>

<script>
import axios from 'axios'
// import firstpage from './components/firstpage/firstpage.vue'
import top from './components/top/top.vue'
import webFooter from './components/footer/web_footer.vue'


export default {
  name: 'App',
  data(){
         return{
             floatHeigth:''
         }
  },
  components: {
           top,webFooter
  },
  mounted(){
       window.addEventListener('scroll',this.floatdiv1);
     

  },
  created(){
            var session = window.localStorage.getItem('username')
            if(session){
              this.$store.commit('upDateUserName',session);
            }
            
            console.log(session)
  },
  methods:{
       floatdiv1:function(event){
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          var floatdiv=document.querySelector('#floatdiv');
          var pagaHeigth=scrollTop-floatdiv.height
          floatdiv.style.top=scrollTop+500+'px';
          if(scrollTop>300){
            floatdiv.style.display='block';
            floatdiv.style.opacity='1';
          }else{
            floatdiv.style.display='none';
            floatdiv.style.opacity='0';
          }
       }
  }
}
</script>

<style>
        #app{
         
          height: 100%;
         
          overflow: hidden;
          /* background-image: url(../static/img/pcqq_bg.jpg); */
          background-position: center;
          background-size: cover;
        }
        #showTime{
           width: 100%;
          /* min-height: 400px; */
          height:100%;
           /* background-color: yellowgreen; */


           
           
        }

        .webfooter{
          position: relative;
         
        }
 
        .top{
          z-index: 10;
        }

        /* 悬浮框样式 */
        #floatdiv{
                     width: 30px;
                     height: 50px;
                     background: rgba(84, 179, 143, 0.719);
                     position: absolute;
                     border-radius: 10px;
                    z-index: 20;
                    right: 0px;
                    text-align: center;
                    display: none;
                    right: 5px;
                    line-height: 50px;
                    opacity: 0;
                    transition: all 0.8s;
                   
                     
        }
        #floatdiv a{
           text-decoration: none;
        }
        #floatdiv i{
            font-size: 30px;
            color: beige;
        }
</style>
